<template>
     <div class="container">
        <div class="screen" ref="screen">
        <div class="top">
            <top1></top1>
            <el-button type="primary" style="width: 200px; margin:  500px 500px;">Primary</el-button>
        </div>
        <div class="bottom">
            <div class="left">
                <top2 class="top2"></top2>
                <midden1 class="midden1"></midden1>
                <xiamian class="xiamian"></xiamian>
            </div>
            <div class="midden">
                <map1></map1>
            </div>
            <div class="right">右</div>
        </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import  top1  from "@/components/top.vue";
import top2  from "@/components/lfet/top.vue";
import midden1  from "@/components/lfet/midden.vue";
import xiamian  from "@/components/lfet/xiamian.vue";
import  map1  from "@/components/map/index.vue";
import { onMounted, ref, } from 'vue';


let screen=ref()

onMounted(()=>{
 screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
})
// watch(screen.value,()=>{
//  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
//  return screen.value
// })

function getScale(w=1980,h=1080){
    const ww=window.innerWidth/w;
     const wh=window.innerHeight/h;
     return ww<wh?ww:wh

}
window.onresize=()=>{
    screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
</script>
<style scoped lang="scss">

        .container {
            width: 100vw;
            height: 100vh;
            background: url(./bg.png) no-repeat;
            background-size: cover;
        }

        .screen {
            position: fixed;
            width: 1920px;
            height: 1080px;
           
            transform-origin: left top;
            left: 50%;
            top: 50%;
           
        }
         .top{
               
                height: 30px;
                width: 100%;
            }
        .bottom{
            display: flex;
        }
        .left{
            flex: 1;
           
            height: 1040px;
            display: flex;
            flex-direction: column;
            .top2{
                flex:1.5;
               
               
            }
            .midden1{
                flex: 1;
                margin-top: 30px;
              
            }
            .xiamian{
                margin-top: 30px;
                flex: 1;
                 background-color:rgb(25, 4, 252);
            }
        }
        .midden{
            flex: 2;
        }
        .right{
            flex: 1;
        }

      
</style>